issue

• close [FE] 행사 생성 페이지에 퍼널 방식 적용 #575

구현 이유

AddBillFunnel 이라는 퍼널 구현체(?)가 도입되었어요. 그래서 비슷하게 퍼널이 적용될 수 있는 곳인 행사 생성 기능도 퍼널을 적용했습니다.

구현 사항

처음에는 퍼널을 아래처럼 구현했어요.

// 추상화 + 불필요한 것들은 트리셰이킹된 코드입니다.

const Component = () => {
  const [step, setStep] = useState('1번 스텝');

  return (
    <>
      {step === '1번 스텝' && <Step1 onNext={() => setStep('2번 스텝')}/>}
      {step === '2번 스텝' && <Step2 onNext={() => setStep('2번 스텝')}/>}
      {step === '3번 스텝' && <Step3/>}
    </>
  )
}

하지만 하나의 스텝에서 다음 스텝으로 넘겨지는 함수(이후부터는 스텝넘기기 함수라고 부르겠습니다.)가 이 컴포넌트 안에 작성되는게 보기 좋지 않아서 useFunnel을 구현하게 되었습니다.

그런데 토스의 퍼널 영상을 보니까 훅 안에서 Funnel, Step이라는 컴포넌트도 return하고 있었습니다.

Funnel 컴포넌트는 현재 스텝에 해당하는 Step 컴포넌트를 찾아 렌더링하는 책임이 있습니다. Step 컴포넌트는 스텝의 이름과 children에 이 스텝에서 렌더링할 컴포넌트를 넘겨받기라는 책임이 있었어요.

그래서 스텝 넘기기 함수와 Funnel, Step을 담아 useFunnel을 구성하게 되었습니다.

그리고 최종적으로 아래와 같은 형태로 행사 생성 퍼널을 구현했어요.

// 추상화 + 불필요한 것들은 트리셰이킹된 코드입니다.

const Component = () => {
  const {moveToNextStep, Step, Funnel} = useFunnel();

  return (
    <Funnel>
      <Step name="1번 스텝">
        <Step1 moveToNextStep={moveToNextStep} />
      </Step>
      
      <Step name="2번 스텝">
        <Step2 moveToNextStep={moveToNextStep} />
      </Step>
      
      <Step name="3번 스텝">
        <Step3 />
      </Step>
    </Funnel>
  );
};

하나의 스텝에서만 사용되는 것이 아닌 여러 스텝에 걸쳐 사용되는 상태는 하나의 훅(useCreateEventData)으로 묶고 행사 생성 퍼널 컴포넌트에서 호출해 하위 스텝으로 내려보내는 방식을 선택했습니다.

이 퍼널에서만 사용되는 전역 상태를 만들어서 사용하는 방법도 있었는데요. 만약 스텝에 하위 컴포넌트가 많고, 거기까지 프롭이 내려가야 했다면 전역 상태를 사용했을 것 같은데 그렇게 깊진 않아서 그냥 드릴링으로 넘겨주게 되었어요.

논의하고 싶은 부분(선택)

행사 생성 페이지에서 여러 스텝에 걸쳐 사용되는 상태를 선언해 내려주는 용도의 훅인 useCreateEventData의 이름이 직관적이지 않은 것 같은데 이름 추천 받습니다..

테스트를 최대한 유지하고 싶어서 일단 바뀐 path를 사이프레스에 적용했는데요. cypress에서 행사 이름을 입력하고 "다음" 버튼을 누르면 퍼널이라서 비밀 번호 입력 페이지로 넘어가도 url이 바뀌면 안됩니다. 그런데 /create/event/?경로로 바뀌네요.왜 이러는지 모르겠어요. 혹시 아시는 분 있나요?